<template>
	<view class="item">
		<template v-if="item.state === 'listing'">
			<view class="padding-box">
				<u-swiper :list="sliders" :interval="6000" effect3d v-if="windowWidth > 0" :height="300" img-mode="aspectFill" bg-color="#FFF"></u-swiper>
			</view>

			<view class="price-box">
				<view class="u-flex">
					<view class="u-flex u-row-between u-p-t-30 u-font-md price-info">
						<view class="price">
							¥
							<view class="value">{{ parseFloat(item.unit_price) + 0 }}</view>
						</view>
						<view class="origin-price">门市价 ¥ {{ parseFloat(item.original_price) + 0 }}</view>
					</view>
				</view>
				<view v-if="saveMoney > 0">
					<view class="discount-info">本单可省 {{ saveMoney }} 元</view>
					<view class="price-tag">会员专享特权</view>
				</view>
			</view>
			<view class="padding-box prod-box" style="margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0">
				<view class="title u-font-lg">{{ item.name }}</view>
				<view class="remark u-flex u-font-md">
					<view class="remark u-font-md">{{ item.remark }}</view>
				</view>
				<view class="service-tips" v-if="item.car_applicable" @click="showBuyNeedKnow = true">
					<view class="text">{{ item.car_applicable }}</view>
					<view class="btn-arrow"><u-icon name="arrow-right"></u-icon></view>
				</view>
			</view>

			<view class="padding-box">
				<view class="box-title">适用门店</view>
				<view class="store" v-for="store in applicableStores">
					<view class="cover">
						<u-lazy-load
							loading-img="/static/images/loadingImg.png"
							threshold="-50"
							border-radius="10"
							:height="80"
							img-mode="aspectFill"
							:image="store.cover"
							:index="index"
						></u-lazy-load>
					</view>
					<view class="name-addr">
						<view class="name">{{ store.shop_name }}</view>
						<view class="addr">{{ store.address }}</view>
					</view>
					<view class="icon-btn" @click="openMap(store)">
						<u-icon name="map"></u-icon>
						<view>导航</view>
					</view>
					<view class="icon-btn" @click="callPhone(store)">
						<u-icon name="phone"></u-icon>
						<view>电话</view>
					</view>
				</view>
			</view>

			<view class="padding-box" v-if="item.details">
				<view class="box-title">服务详情</view>
				<view class="u-content">
					<u-parse :html="item.details"></u-parse>
				</view>
			</view>

			<view class="padding-box">
				<view class="box-title">购买须知</view>
				<view class="purchase-tips">
					<view class="term">
						<view class="term-title">适用车型</view>
						<view class="text">{{ item.car_applicable }}</view>
					</view>
					<view class="term">
						<view class="term-title">有效期</view>
						<view class="text">{{ item.validity }}</view>
					</view>
					<view class="term">
						<view class="term-title">预约信息</view>
						<view class="text">{{ item.reservation }}</view>
					</view>
					<view class="term">
						<view class="term-title">温馨提示</view>
						<view class="text">{{ item.remind }}</view>
					</view>
				</view>
			</view>
			<u-popup v-model="showBuyNeedKnow" mode="bottom">
				<view class="padding-box">
					<view class="box-title">购买须知</view>
					<view class="purchase-tips">
						<view class="term">
							<view class="term-title">适用车型</view>
							<view class="text">{{ item.car_applicable }}</view>
						</view>
						<view class="term">
							<view class="term-title">有效期</view>
							<view class="text">{{ item.validity }}</view>
						</view>
						<view class="term">
							<view class="term-title">预约信息</view>
							<view class="text">{{ item.reservation }}</view>
						</view>
						<view class="term">
							<view class="term-title">温馨提示</view>
							<view class="text">{{ item.remind }}</view>
						</view>
					</view>
				</view>
			</u-popup>

			<!-- <view style="height: 100rpx;"></view> -->

			<view class="navigation u-flex u-row-between" style="justify-content: center">
				<!-- <view class="left">
					<view class="item" @click="switchTab('/pages/custom/custom')">
						<div class="uni-tabbar__icon" style="width: 20px; height: 20px;"><img src="/static/images/home-1.png"></div>
						<view class="text u-line-1">首页</view>
					</view>
					<view class="item" @click="openCS">
						<u-icon name="server-fill" :size="40" ></u-icon>
						<view class="text u-line-1">客服</view>
					</view>
				</view> -->
				<view class="right" @click="buyNow">
					<template v-if="user.vip_price === 1">
						<view class="cart btn u-line-1">
							优惠价 ¥
							<view class="price-value">{{ parseFloat(item.unit_price + 0) }}</view>
							立即抢购
						</view>
					</template>
					<template v-else><view class="cart btn u-line-1">非会员原价下单</view></template>
				</view>
			</view>
		</template>
		<template v-if="item.state === 'in-stock'">
			<u-swiper :list="sliders" :interval="6000" v-if="windowWidth > 0" :height="windowWidth" img-mode="aspectFit" bg-color="#FFF"></u-swiper>
			<view class="wrap u-padding-30">
				<text class="title u-font-lg">{{ item.name }}</text>
				<text class="remark u-font-md" v-if="item.spec">{{ item.spec }}</text>

				<view class="remark u-flex u-p-t-20 u-font-md">
					<text class="remark u-font-md">{{ item.remark }}</text>
				</view>

				<view class="u-flex u-row-between">
					<view class="u-flex u-row-between u-p-t-30 u-p-b-30 u-font-md">
						<text class="type" v-if="item.weight">{{ item.weight }}克/{{ item.unit ? item.unit : '件' }}</text>
						<text class="price">{{ item.unit_price }}元</text>
					</view>
					<u-number-box v-model="quantity" :min="1" @change="numChange"></u-number-box>
				</view>
			</view>

			<u-line class="u-line"></u-line>

			<view class="u-content">
				<u-parse :html="item.details"></u-parse>
			</view>

			<view style="height: 100rpx"></view>

			<view class="navigation u-flex u-row-between">
				<view class="left">
					<!-- <view class="item" @click="switchTab('/pages/custom/custom')">
						<div class="uni-tabbar__icon" style="width: 20px; height: 20px;"><img src="/static/images/home-1.png"></div>
						<view class="text u-line-1">首页</view>
					</view>
					<view class="item" @click="openCS">
						<u-icon name="server-fill" :size="40" ></u-icon>
						<view class="text u-line-1">客服</view>
					</view> -->
					<!-- <view class="item" @click="openChelixin">
						<div class="uni-tabbar__icon" style="width: 20px; height: 20px;"><img src="/static/images/agreement.png"></div>
						<view class="text u-line-1">《车力新用户协议》</view>
					</view> -->
					<!-- <view class="item"> -->
					<!-- <u-icon name="zhuanfa" :size="40" :color="$u.color['contentColor']"></u-icon> -->
					<!-- <view class="text u-line-1">分享</view> -->
					<!-- </view> -->
					<!-- <view class="item car" @click="switchTab('/pages/buy/cart')">
						<u-badge class="car-num" :count="cartQantity" type="error" :offset="[-3, -6]"></u-badge>
						<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
						<view class="text u-line-1">购物车</view>
					</view> -->
				</view>
				<!-- <view class="right" @click="addToCart">
					<view class="cart btn u-line-1">加入购物车</view>
				</view> -->
				<view class="right">
					<view class="cart btn u-line-1" style="background-color: gray">商品已下架</view>
				</view>
			</view>
		</template>

		<template v-if="item.state === 'virtual_pay'">
			<u-swiper :list="sliders" :interval="6000" v-if="windowWidth > 0" :height="windowWidth" img-mode="aspectFit" bg-color="#FFF"></u-swiper>
			<view class="wrap u-padding-30">
				<text class="title u-font-lg">{{ item.name }}</text>
				<text class="remark u-font-md" v-if="item.spec">{{ item.spec }}</text>

				<view class="remark u-flex u-p-t-20 u-font-md">
					<text class="remark u-font-md">{{ item.remark }}</text>
				</view>
			</view>

			<u-line class="u-line"></u-line>
			<!-- <view style="height: 50rpx;"></view> -->

			<view class="u-content">
				<u-parse :html="item.details"></u-parse>
			</view>

			<view class="form-content">
				<label class="big-title">付款信息</label>
				<label class="u-border-bottom" v-if="item.require_username === 'yes'">
					<view class="tips">姓名</view>
					<input type="text" v-model="form.username" auto-complete placeholder="请填写姓名" />
				</label>
				<label class="u-border-bottom" v-if="item.require_mobile === 'yes'">
					<view class="tips">联系电话</view>
					<input type="number" v-model="form.mobile" placeholder="请输入手机号" />
				</label>
				<label class="u-border-bottom" v-if="form.require_inviter === 'yes'">
					<view class="tips">请填写邀请码</view>
					<input style="flex: 1" type="text" v-model="form.inviter" placeholder="请填写邀请码" />
				</label>
				<label class="u-border-bottom">
					<view class="tips">备注留言</view>
					<input style="flex: 1" type="text" v-model="form.remark" :placeholder="item.remark_placeholder" />
				</label>

				<view style="text-align: center; margin-bottom: 50rpx; margin-top: 50rpx">
					<u-button style="display: block" @tap="showPayMethod = true" type="primary" shape="circle" size="medium">确认支付: ￥{{ item.unit_price }}</u-button>
				</view>
				<u-action-sheet :list="payMethods" v-model="showPayMethod" @click="clickPayMethod" :tips="tips" :cancel-btn="true"></u-action-sheet>
				<u-modal v-model="showWxNativePay" title="微信扫码支付" @confirm="gotoVirtualPaymentDetail" confirm-text="已完成支付">
					<view class="slot-content">
						<rich-text :nodes="wxNativePayQRCode"></rich-text>
					</view>
				</u-modal>
			</view>
		</template>
		<wx-share :title="item.name" :desc="item.remark" :imgUrl="item.cover" :link="currentPage" ref="wxs"></wx-share>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
var jweixin = require('jweixin-module');

export default {
	data() {
		return {
			scrollTop: 0,
			currentPage: location.href,
			itemId: '',
			shop: {},
			user: {},
			item: {},
			storeId: '',
			quantity: 1,
			cartQantity: '',
			windowWidth: 0,
			form: {},
			virtualPayment: {},
			showPayMethod: false,
			showWxNativePay: false,
			wxNativePayQRCode: '',
			payMethods: [
				{
					text: '微信支付',
					color: 'green',
					fontSize: 28,
					subText: '直接使用微信付款',
					payMethod: 'wx-jsapi'
				},
				{
					text: '微信收款码',
					color: 'green',
					fontSize: 28,
					subText: '扫码付款，可请朋友代付',
					payMethod: 'wx-native'
				}
				// {
				// 	text: '微信H5支付',
				// 	color: 'green',
				// 	fontSize: 28,
				// 	subText: '手机浏览器客户端H5网页支付',
				// 	payMethod: 'wx-mweb'
				// }
			],
			tips: {
				text: '选择支付方式',
				color: '#909399',
				fontSize: 24
			},
			showBuyNeedKnow: false,
			wxConfig: {}
		};
	},
	computed: {
		sliders() {
			let s = [];
			if (this.item.images) {
				for (let i = 0; i < this.item.images.length; i++) {
					s.push({
						image: this.item.images[i],
						name: ''
					});
				}
			}
			return s;
		},
		applicableStores() {
			if (this.item.applicable_stores && this.item.applicable_stores.length > 0) {
				return this.item.applicable_stores;
			}
			return [];
		},
		saveMoney() {
			if (this.item.original_price > 0) {
				let save = this.item.original_price - this.item.unit_price;
				if (save > 0) {
					return parseFloat(save.toFixed(2));
				}
			}
			return 0;
		}
	},
	onLoad(options) {
		const info = uni.getSystemInfoSync();
		console.log(info);
		this.windowWidth = info.windowWidth * 2;
		this.itemId = options.id;
		if (options.store_id) {
			this.storeId = options.store_id;
		}
		console.log(this.windowWidth);
		this.getItem();
		this.getWxConfig();
	},
	onShow() {
		this.getShop();
		this.getUserInfo();
		this.getCart();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods: {
		getWxConfig() {
			let that = this;

			this.$u
				.post('/shopping/wx-js-sdk-config', {
					current_page: location.href.split('#')[0]
				})
				.then((res) => {
					if (!res.current_uid) {
						return;
					}
					console.log(res);
					this.wxConfig = res;
					jweixin.config(this.wxConfig);
					//jweixin.config(res);
					// jweixin.ready(function() {
					// 	// TODO
					// 	console.log('wx-is ready')
					// });
					// jweixin.error(function(res) {
					// 	console.log(res)
					// 	// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					// });
				})
				.catch((e) => {});
		},
		openChelixin() {
			if (this.shop.chelixin_article_id) {
				this.openPage('/pages/article/detail', { id: this.shop.chelixin_article_id });
			}
		},
		openCS() {
			location.href = 'https://work.weixin.qq.com/kfid/kfc6d3aceb85522e2b7';
		},
		getItem() {
			let data = { id: this.itemId };
			if (this.storeId) {
				data.store_id = this.storeId;
			}
			this.$u
				.post('/item/detail', data)
				.then((res) => {
					this.item = res;
				})
				.catch((e) => {
					console.log(e);
				});
		},
		getCart() {
			this.$u
				.post('/shopping/cart-list', {})
				.then((res) => {
					console.log(res);
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
					}
					this.cartQantity = qty;
					// if (qty > 0) {
					// 	uni.setTabBarBadge({
					// 		index: 1,
					// 		text: qty.toString()
					// 	})
					// } else {
					// 	uni.removeTabBarBadge({
					// 		index: 1
					// 	})
					// }
				})
				.catch((e) => {});
		},
		addToCart() {
			this.$u
				.post('/shopping/add-to-cart', {
					item_id: this.itemId,
					quantity: this.quantity
				})
				.then((res) => {
					console.log(res);
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
					}
					this.cartQantity = qty;
					// uni.setTabBarBadge({
					// 	index: 1,
					// 	text: qty.toString()
					// })
				})
				.catch((e) => {});
		},
		buyNow() {
			let data = {
				item_id: this.itemId,
				quantity: this.quantity
			};
			if (this.storeId) {
				data.store_id = this.storeId;
			}
			this.$u
				.post('/shopping/buy-now', data)
				.then((res) => {
					console.log(res);
					if (res.id) {
						this.openPage('/pages/ucp/order-detail', { id: res.id });
					}
				})
				.catch((e) => {});
		},
		callPhone(store) {
			if (!store.service_tel) {
				return;
			}
			uni.makePhoneCall({
				phoneNumber: store.service_tel // 电话号码
			});
		},
		openMap(store) {
			console.log(store);
			let lat = parseFloat(store.lat);
			let lng = parseFloat(store.lng);
			if (!lat || !lng) {
				return;
			}
			let shopName = store.shop_name;
			let addr = store.address;
			jweixin.ready(() => {
				jweixin.openLocation({
					// 调起地图应用进行导航
					latitude: lat, // 纬度，浮点数，范围为90 ~ -90
					longitude: lng, // 经度，浮点数，范围为180 ~ -180。
					name: shopName, // 位置名
					address: addr, // 地址详情说明
					scale: 14, // 地图缩放级别,整型值,范围从1~28。默认为最大
					infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
				});
			});
			jweixin.error(function (res) {
				console.log(res);
				// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
			});
		},
		// VirtualPay
		gotoVirtualPaymentDetail() {
			if (this.virtualPayment.id) {
				this.openPage('/pages/ucp/order-detail', { id: this.virtualPayment.id });
			}
		},
		clickPayMethod(index) {
			console.log(`点击了第${index + 1}项，内容为：${this.payMethods[index].text}`);
			switch (this.payMethods[index].payMethod) {
				case 'wx-jsapi':
					this.wxJsApiPay();
					break;
				case 'wx-native':
					this.wxNativePay();
					break;
				case 'wx-mweb':
					this.wxMWebPay();
				default:
			}
		},
		wxJsApiPay() {
			let that = this;
			this.$u
				.post('/shopping/virtual-pay-now', {
					item_id: this.itemId,
					quantity: this.quantity,
					form: this.form
				})
				.then((res) => {
					console.log(res);
					this.virtualPayment = res;
					this.$u
						.post('/payment/call-pay', {
							payment_id: this.virtualPayment.id,
							pay_method: 'wx-jsapi'
						})
						.then((res) => {
							console.log(res);
							function onBridgeReady() {
								WeixinJSBridge.invoke('getBrandWCPayRequest', res, function (res) {
									console.log(res);
									if (res.err_msg === 'get_brand_wcpay_request:ok' || res.errMsg === 'get_brand_wcpay_request:ok') {
										uni.showToast({
											title: '支付成功',
											icon: 'success'
										});
										that.openPage('/pages/ucp/order-detail', { id: that.virtualPayment.id });
										//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
									} else {
										if (res.errMsg) {
											uni.showToast({
												title: res.errMsg,
												icon: 'none',
												duration: 3000
											});
										}
										if (res.err_msg) {
											uni.showToast({
												title: res.err_msg,
												icon: 'none',
												duration: 3000
											});
										}
									}
								});
							}
							if (typeof WeixinJSBridge == 'undefined') {
								if (document.addEventListener) {
									document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
								} else if (document.attachEvent) {
									document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
									document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
								}
							} else {
								onBridgeReady();
							}
						})
						.catch((e) => {
							console.log(e);
						});
				})
				.catch((e) => {
					console.log(e);
				});
		},
		wxNativePay() {
			this.$u
				.post('/shopping/virtual-pay-now', {
					item_id: this.itemId,
					quantity: this.quantity,
					form: this.form
				})
				.then((res) => {
					console.log(res);
					this.virtualPayment = res;
					this.$u
						.post('/payment/call-pay', {
							payment_id: this.virtualPayment.id,
							pay_method: 'wx-native'
						})
						.then((res) => {
							console.log(res);
							if (res.code_url) {
								this.wxNativePayQRCode = `<div style="display:flex;align-items:center;justify-content:center;padding:15px;box-sizing:border-box;"><img src="${res.code_url}" style="max-width:100%;"/></div>`;
								this.showWxNativePay = true;
							} else {
								uni.showToast({
									title: res.msg,
									icon: none
								});
							}
						})
						.catch((e) => {
							console.log(e);
						});
				})
				.catch((e) => {
					console.log(e);
				});
		},
		openPage(jumpURL, params = {}) {
			console.log(jumpURL);
			this.$u.route({
				type: 'to',
				params: params,
				url: jumpURL,
				animationType: 'slide-in-bottom'
			});
		},
		switchTab(jumpURL) {
			uni.switchTab({
				url: jumpURL
			});
		},
		getUserInfo() {
			this.$u
				.post('/user/info', {})
				.then((res) => {
					this.user = res;
					if (this.user.referral_id == 0) {
						this.user.referral_id = '';
					}
					if (this.user.verified !== 'yes') {
						uni.showToast({
							title: '请先完成车主注册'
						});
						this.openPage('/pages/ucp/profile');
					}
				})
				.catch((e) => {
					console.log(e);
				});
		},
		getShop() {
			this.$u
				.post('/shopping/shop-setting', {})
				.then((res) => {
					this.shop = res;
				})
				.catch((e) => {});
		},
		numChange(e) {
			this.quantity = e.value;
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep uni-swiper {
	// height: 100vw!important;
}
.item {
	.price-box {
		margin: 0 20rpx;
		padding: 0 10rpx 20rpx 10rpx;
		box-sizing: border-box;
		background-color: #ed3f14;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		color: #fff;
		.price-info {
			align-items: flex-end;
			.price {
				font-size: 1.2em;
				font-weight: 600;
				vertical-align: bottom;
				padding-left: 10rpx;
				.value {
					display: inline-block;
					font-size: 44rpx;
					padding: 0 10rpx;
				}
			}
			.origin-price {
				font-size: 0.8em;
				font-weight: normal;
				padding-left: 10rpx;
				line-height: 2;
			}
		}
		.discount-info {
			border-radius: 6rpx;
			display: inline-block;
			font-size: 24rpx;
			padding: 0 10rpx;
			background-color: #fff;
			color: red;
			margin-left: 10rpx;
			position: relative;
			margin-right: 14rpx;
			font-weight: 400;
			line-height: 1.8;
		}
		.discount-info::after {
			content: '';
			position: absolute;
			top: 50%;
			right: -15rpx;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10rpx 0 10rpx 15rpx;
			border-color: transparent transparent transparent #fff;
		}
		.price-tag {
			border-radius: 6rpx;
			display: inline-block;
			font-size: 24rpx;
			padding: 0 10rpx;
			background-color: #fff;
			color: red;
			margin-left: 10rpx;
			font-weight: 400;
			position: relative;
			line-height: 1.8;
		}
	}
	.prod-box {
		.service-tips {
			display: flex;
			flex-direction: row;
			overflow: hidden;
			font-size: 24rpx;
			border-top: 1rpx dashed #eee;
			margin-top: 14rpx;
			padding-top: 14rpx;
			line-height: 1.8;
			font-size: 400;
			color: rgba(0, 0, 0, 0.53);
			.text {
				flex: 1;
				overflow: hidden;
			}
			.btn-arrow {
				width: 30rpx;
				text-align: center;
			}
		}
	}
	.box-title {
		font-size: 34rpx;
		font-weight: bold;
		line-height: 1.8;
		margin-bottom: 10rpx;
	}
	.store {
		display: flex;
		flex-direction: row;
		padding: 10rpx 0 10rpx 10rpx;
		box-sizing: border-box;
		align-items: flex-start;
		.cover {
			width: 80rpx;
			height: 80rpx;
			border-radius: 8rpx;
		}
		.name-addr {
			flex: 1;
			overflow: hidden;
			padding-left: 10rpx;
			.name {
				font-weight: bold;
				white-space: nowrap; /* 保持文字在一行显示 */
				overflow: hidden; /* 隐藏超出容器的部分 */
				text-overflow: ellipsis; /* 文字过长时显示省略号 */
				line-height: 1.8;
			}
			.addr {
				font-size: 24rpx;
				white-space: nowrap; /* 保持文字在一行显示 */
				overflow: hidden; /* 隐藏超出容器的部分 */
				text-overflow: ellipsis; /* 文字过长时显示省略号 */
			}
		}
		.icon-btn {
			width: 100rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.63);
			.u-icon {
				font-size: 34rpx;
				margin-bottom: 6rpx;
			}
		}
	}
	.title {
		font-weight: bold;
		display: block;
		font-size: 1.4em;
		padding-top: 10rpx;
		line-height: 1.8;
	}
	.remark {
		color: darkgoldenrod;
		line-height: 1.8;
	}

	.u-content {
		border-radius: 8rpx;
		overflow: hidden;
		image {
			line-height: 0;
		}
		p {
			margin-block-start: 0.5em;
			margin-block-end: 0.5em;
		}
	}
	.purchase-tips {
		.term {
			display: flex;
			flex-direction: row;
			font-size: 28rpx;
			line-height: 1.8;
			padding: 8rpx 0;
			.term-title {
				width: 160rpx;
				color: lightslategray;
			}
			.text {
				flex: 1;
				overflow: hidden;
			}
		}
	}
}

.navigation {
	display: flex;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;

	.left {
		display: flex;
		font-size: 20rpx;

		.item {
			margin: 0 30rpx;
			display: flex;
			align-items: center;
			flex-direction: column;

			&.car {
				text-align: center;
				position: relative;

				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}

	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;

		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}

		.cart {
			background-color: #ed3f14;
			margin-right: 30rpx;
			padding-left: 2.5em;
			padding-right: 2.5em;
		}

		.buy {
			background-color: #ff7900;
		}
	}
}

.form-content {
	padding: 0 60rpx;
	padding-bottom: 30rpx;
	position: sticky;
	bottom: 0;
	background: rgba(255, 255, 255, 0.9);
	filter: blur(0.3);

	.title {
		text-align: center;
		font-size: 48rpx;
		font-weight: 500;
		margin-bottom: 50rpx;
		img {
			max-width: 80%;
		}
	}

	label {
		display: flex;
		// border-bottom: 1px solid #dbdbdb;
		margin-bottom: 18rpx;
		padding: 18rpx 0;
	}

	input {
		text-align: left;
		// margin-bottom: 10rpx;
		// padding-bottom: 6rpx;
	}

	input[short] {
		width: 4em;
	}

	.tips {
		color: $u-type-info;
		// margin-bottom: 44rpx;
		// margin-top: 18rpx;
		color: #02396a;
		width: 7em;
	}
	.link-color {
		color: #195ed7;
	}

	.getCaptcha {
		background-color: #195ed7;
		color: $u-tips-color;
		color: #fff;
		border: none;
		font-size: 30rpx;
		padding: 12rpx 0;

		&::after {
			border: none;
		}
	}

	.alternative {
		color: $u-tips-color;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.u-border-bottom::after {
		border-color: #9d9ea0;
	}

	uni-input {
		// padding-bottom:20rpx;
	}
	.sm-font {
		font-size: 0.9em;
		margin-bottom: 1em;
		line-height: 1.8;
	}
	.login-box {
		text-align: right;
		padding: 40rpx 0 50rpx 0;
	}
	.select-icon {
		height: 28rpx;
		display: inline-block;
		margin-right: 0.5em;
	}
}
.price-value {
	font-size: 1.2em;
	display: inline-block;
	padding: 0 10rpx;
}
</style>
